<template>
    <div class="orderList">
        <div class="goodsList_header">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: backHomeStart+'EchartsList' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item disabled="true">订单中心</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: backHomeStart+'UserOrderList' }">订单列表</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: backHomeStart+'OrderList' }">订单详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-divider></el-divider>
        <div class="orderList_status">
            <div style="height: 40px;width: 200px;font-size: 18px">推荐销量</div>
            <div class="progressleading" v-if="labels">
                <ul v-for="(label,index) in labels">
                    <li>
                        <span :style="'background-color :'+colors_F[index]">{{randNums[index]}}</span>
                        <span :style="'background-color :'+colors_S[index]">{{label}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <el-divider></el-divider>
        <div class="searchArea">
            <el-input v-model="search"
                      style="width: 150px;"
                      prefix-icon="el-icon-search"
                      placeholder="请输入内容"></el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <el-divider></el-divider>
        <el-row class="clear-filter">
            <el-button class="btn-right" @click="clearFilter" type="success" plain>清除所有过滤器</el-button>
        </el-row>

        <el-scrollbar class="tableScrollbar">
            <el-table
                    ref="filterTable"
                    :data="pageInfo.list"
                    border
                    style="width: 100%"
            >
                <el-table-column
                        prop="oId"
                        label="序号"
                        align="center"
                        sortable
                        width="105%">
                    <template slot-scope="scope">
                        <el-tag type="info" effect="plain">
                            {{scope.row.oId}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="oOrderid"
                        label="订单编号"
                        align="center"
                        sortable
                        width="130%">
                    <template slot-scope="scope">
                        <el-tag type="info" effect="plain">
                            ZTX-ORD{{scope.row.oOrderid}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="goods.goodsPicturepaths[0].gpPicpath"
                        label="商品图片"
                        width="80%"
                        align="center"
                        column-key="goods.goodsPicturepaths[0].gpPicpath">
                    <template slot-scope="scope">
                        <Avatar v-if="scope.row.goods.goodsPicturepaths[0].gpPicpath" :circle-url="startUrl+scope.row.goods.goodsPicturepaths[0].gpPicpath"></Avatar>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="goods.goodsname"
                        label="商品名字"
                        sortable
                        align="center"
                        width="150%"
                        column-key="goods.goodsname">
                    <template slot-scope="scope">
                        <el-tag effect="plain">
                            {{scope.row.goods.goodsname}}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="goods.firstCategory.fcName"
                        label="一级分类"
                        width="110%"
                        align="center"
                        column-key="goods.firstCategory.fcName">
                    <template slot-scope="scope">
                        <el-tag type="danger" effect="plain">
                            {{scope.row.goods.firstCategory.fcName}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="goods.secondCategory.scName"
                        label="二级分类"
                        width="95%"
                        align="center"
                        column-key="goods.secondCategory.scName">
                    <template slot-scope="scope">
                        <el-tag type="danger" effect="plain">
                            {{scope.row.goods.secondCategory.scName}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="goods.goodsbrand"
                        label="商品品牌"
                        width="110%"
                        align="center">
                    <template slot-scope="scope">
                        <el-tag type="danger" effect="plain">
                            {{scope.row.goods.goodsbrand}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="oCount"
                        label="购买数量"
                        align="center"
                        sortable
                        width="110%">
                    <template slot-scope="scope">
                        <el-tag type="danger" effect="dark">
                            {{scope.row.oCount}}件
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="goods.goodsprice"
                        label="商品总价格"
                        sortable
                        align="center"
                        width="230%">
                    <template slot-scope="scope">
                        <el-tag type="warning" effect="plain">
                            {{scope.row.goods.goodsprice}}￥*{{scope.row.oCount}}件*{{scope.row.goods.goodsdiscount}}折={{scope.row.goods.goodsprice*scope.row.oCount*scope.row.goods.goodsdiscount/10}}￥
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作"
                                 align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary" icon="el-icon-edit" circle
                                @click="handleEdit(scope.$index, scope.row)">
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger" icon="el-icon-delete" circle
                                @click="handleDelete(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
        <DiaLog :dialog-visible="dialogVisible"></DiaLog>
        <div class="footer_Area">
            <div class="pagination_right">
                <el-pagination class="pagination_border"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="pageSizes"
                               :page-size="pageSizes[0]"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="datasCount">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
    import Avatar from "../../components/Avatar";
    export default {
        name: "OrderList",
        data(){
            return{
                colors_F:['#9bd16b','#e85927','#e88167','#e782b4','#75a9dc',],
                colors_S:['#b3e680','#FF6666','#FF9966','#FF99CC','#8abdf0',],
                search:'',
                pageInfo : {},
                filters : [],
                pageSizes : [],
                datasCount : 400,
                currentPage : 1,
                perPageSize : 5,
                dialogVisible : false,
                startUrl:this.$store.state.beginUrl,
                picPath : [],
                backHomeStart:this.$store.state.backHomeHeader,
                labels:this.$store.state.labelMarks,
                randNums:[]
            }
        },
        created() {
            this.getDatas();
            this.getNums();
        },
        mounted() {
            // this.getDatas();
        },
        methods:{
            getNums(){
                let total = null;
                for (let i = 0; i < 4 ; i++) {
                    let randNum = this.getRandNum();
                    this.randNums.push(randNum);
                    total +=randNum;
                }
                this.randNums.unshift(total);
            },
            getRandNum(){
                return Math.round(Math.random()*9999999)
            },
            getPageSizes(total){
                this.pageSizes.length = 0;
                for (let i = 0; i < total / 5 ; i++) {
                    this.pageSizes.push((i+1)*5);
                }
            },
            getDatas(){
                this.$axios.get('/orderlist/list/'+this.currentPage+"/"+this.perPageSize).then(result=>{
                    this.pageInfo=result.data;
                    // console.log(this.pageInfo);
                    let goodsList = this.pageInfo.list;
                    this.dialogVisible=false;
                    /*标签去重*/
                    this.clearRepeatLabel(goodsList);
                    this.datasCount=this.pageInfo.total;
                    this.getPageSizes(this.datasCount);
                }).catch();
            },
            deleteById(id){
                this.$axios.get("/orderlist/remove/"+id).then(result=>{
                    this.addResult(result.data);
                    this.getDatas();
                }).catch(err=>{
                    alert(err);
                })
            },
            clearRepeatLabel(goodsList){
                for (let i = 0; i < goodsList.length; i++) {
                    if (goodsList[i].goodslabel != '' && goodsList[i].goodslabel != null){
                        let checksame = false;
                        if (this.filters.length>0){
                            for (let j = 0; j <this.filters.length; j++) {
                                if (goodsList[i].goodslabel==this.filters[j].value){
                                    checksame = true;
                                    break;
                                }
                            }
                        }
                        if (checksame==false){
                            this.filters.push({ text: goodsList[i].goodslabel, value: goodsList[i].goodslabel});
                        }
                    }
                }
            },
            onSubmit() {
                console.log('submit!');
            },
            clearFilter() {
                this.$refs.filterTable.clearFilter();
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.goodslabel === value;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            handleEdit(index, row) {
                // console.log(index, row);
                this.$store.commit("getModifyData",row);
                /*弹窗*/
                this.dialogVisible = true;
            },
            handleDelete(index, row) {
                // console.log(index, row.goodsid);
                this.deleteById(row.goodsid);
            },
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.perPageSize = val;
                this.getDatas();
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getDatas();
            },
            addResult(val) {
                this.$message({
                    showClose: true,
                    message: val===true?'恭喜你，删除成功！':'错了哦，删除失败！',
                    type: val===true?'success':'error'
                });
            },
            gotoAddGoods(){
                this.$router.push('/BackHome/AddGoods');
            }
        },
        computed:{

        },
        components:{
            Avatar
        }
    }
</script>

<style scoped>
    .footer_Area{
        height: 40px;
        width: 100%;
        /*border: 1px #9162ff solid;*/
        /*outline: 1px solid red;*/
        padding: 10px;
    }
    .pagination_right{
        height: 40px;
        width: 55%;
        /*border: 1px #9162ff solid;*/
        float: right;
        /*outline: 1px solid red;*/
    }
    .pagination_border{
         width: 550px;
         /*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)*/
     }

    .orderList{
        /*border: 1px #89ffa5 solid;*/
    }
    .clear-filter{
        padding: 0;
        height: 40px;
    }
    .btn-left{
        float: left;
        margin-left: 8px;
    }
    .borderLine{
        border: 1px #ff6341 solid;
    }
    .el-table{
        /*border: 1px #ff6341 solid;*/
    }
    .btn-right{
        /*border: 1px red solid;*/
        float: right;
        margin-right: 8px;
    }
    .tableScrollbar{
        height: 63vh;
        /*border: 1px #ff6341 solid;*/
    }
    .searchArea{
        text-align: left;
    }
    .progressleading{
        overflow: hidden;
    }
    *{
        margin: 0;
        padding: 0;
    }
    ul>li{
        float: left;
        display: inline-block;
        list-style-type: none;
        width: 200px;
        height: 100px;
        /*outline: 1px #ff6341 solid;*/
        margin-left: 20px;
        text-align: center;
        border-radius: 10px;
    }
    ul>li>span:nth-child(1){
        display: inline-block;
        width: 200px;
        height: 60px;
        /*outline: 1px #ff6341 solid;*/
        color: white;
        line-height: 60px;
        font-size: 30px;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    }
    ul>li>span:nth-child(2){
        display: inline-block;
        width: 200px;
        height: 40px;
        /*outline: 1px #ff6341 solid;*/
        line-height: 40px;
        color: white;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .orderList_status{
        width: 100%;
        height: 160px;
        /*outline: 1px #ff6341 solid;*/
        /*outline: 1px #ff6341 solid;*/
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
</style>